<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="description" content="wsw_blog_admin" />
  <title>Wsw_blog后台管理系统</title>
  <link rel="stylesheet" type="text/css" href="assets/waifu.css" />
  <style>
    @charset "utf-8";

    body {
      background: #161B29;
      margin: 0 auto;
      height: 100%;
      width: 100%;
    }

    .container {
      width: 40vw;
      height: 40vw;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .common {
      height: 5vw;
      max-height: 100%;
      overflow: auto;
      width: 2vw;
      margin: auto;
      max-width: 100%;
      position: absolute;
      border-radius: 0vw 10vw 0vw 10vw;
      box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
    }

    .one {
      transform: rotate(45deg);
      left: 0;
      right: 0;
      top: 0;
      bottom: 7.5vw;
    }

    .two {
      transform: rotate(90deg);
      left: 5.5vw;
      right: 0;
      top: 0;
      bottom: 5.5vw;
    }

    .three {
      transform: rotate(135deg);
      left: 7.5vw;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .four {
      transform: rotate(180deg);
      left: 5.5vw;
      right: 0;
      top: 5.5vw;
      bottom: 0;
    }

    .five {
      transform: rotate(225deg);
      left: 0;
      right: 0;
      top: 7.5vw;
      bottom: 0;
    }

    .six {
      transform: rotate(270deg);
      left: 0;
      right: 5.5vw;
      top: 5.5vw;
      bottom: 0;
    }

    .seven {
      transform: rotate(315deg);
      left: 0;
      right: 7.5vw;
      top: 0;
      bottom: 0;
    }

    .eight {
      transform: rotate(360deg);
      left: 0;
      right: 5.5vw;
      top: 0;
      bottom: 5.5vw;
    }

    .one {
      animation: one 1s ease infinite;
      -moz-animation: one 1s ease infinite;
      /* Firefox */
      -webkit-animation: one 1s ease infinite;
      /* Safari and Chrome */
      -o-animation: one 1s ease infinite;
      /* Opera */
    }

    @keyframes one {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .two {
      animation: two 1s .125s ease infinite;
      -moz-animation: two 1s .125s ease infinite;
      /* Firefox */
      -webkit-animation: two 1s .125s ease infinite;
      /* Safari and Chrome */
      -o-animation: two 1s .125s ease infinite;
      /* Opera */
    }

    @keyframes two {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .three {
      animation: three 1s .25s ease infinite;
      -moz-animation: three 1s .25s ease infinite;
      /* Firefox */
      -webkit-animation: three 1s .25s ease infinite;
      /* Safari and Chrome */
      -o-animation: three 1s .25s ease infinite;
      /* Opera */
    }

    @keyframes three {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .four {
      animation: four 1s .375s ease infinite;
      -moz-animation: four 1s .375s ease infinite;
      /* Firefox */
      -webkit-animation: four 1s .375s ease infinite;
      /* Safari and Chrome */
      -o-animation: four 1s .375s ease infinite;
      /* Opera */
    }

    @keyframes four {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .five {
      animation: five 1s .5s ease infinite;
      -moz-animation: five 1s .5s ease infinite;
      /* Firefox */
      -webkit-animation: five 1s .5s ease infinite;
      /* Safari and Chrome */
      -o-animation: five 1s .5s ease infinite;
      /* Opera */
    }

    @keyframes five {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .six {
      animation: six 1s .625s ease infinite;
      -moz-animation: six 1s .625s ease infinite;
      /* Firefox */
      -webkit-animation: six 1s .625s ease infinite;
      /* Safari and Chrome */
      -o-animation: six 1s .625s ease infinite;
      /* Opera */
    }

    @keyframes six {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .seven {
      animation: seven 1s .750s ease infinite;
      -moz-animation: seven 1s .750s ease infinite;
      /* Firefox */
      -webkit-animation: seven 1s .750s ease infinite;
      /* Safari and Chrome */
      -o-animation: seven 1s .750s ease infinite;
      /* Opera */
    }

    @keyframes seven {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .eight {
      animation: eight 1s .875s ease infinite;
      -moz-animation: eight 1s .875s ease infinite;
      /* Firefox */
      -webkit-animation: eight 1s .875s ease infinite;
      /* Safari and Chrome */
      -o-animation: eight 1s .875s ease infinite;
      /* Opera */
    }

    @keyframes eight {

      0%,
      100% {}

      50% {
        box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
      }
    }

    .container {
      animation: container 5s linear infinite;
      -moz-animation: container 5s linear infinite;
      /* Firefox */
      -webkit-animation: container 5s linear infinite;
      /* Safari and Chrome */
      -o-animation: container 5s linear infinite;
      /* Opera */
    }

    @keyframes container {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }


    .fade-in {
      animation: fade-in 2s ease;
      -moz-animation: fade-in 2s ease;
      /* Firefox */
      -webkit-animation: fade-in 2s ease;
      /* Safari and Chrome */
      -o-animation: fade-in 2s ease;
      /* Opera */
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .out {
      animation: out 2s 15s ease;
      -moz-animation: out 2s 15s ease;
      /* Firefox */
      -webkit-animation: out 2s 15s ease;
      /* Safari and Chrome */
      -o-animation: out 2s 15s ease;
      /* Opera */
    }

    @keyframes out {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="root">
    <div>

      <div class="out">
        <div class="fade-in">
          <div class="container">
            <div class="one common"></div>
            <div class="two common"></div>
            <div class="three common"></div>
            <div class="four common"></div>
            <div class="five common"></div>
            <div class="six common"></div>
            <div class="seven common"></div>
            <div class="eight common"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="waifu-tool">
      <span class="fui-eye"></span>
      <span class="fui-user"></span>
      <span class="fui-photo"></span>
      <span class="fui-cross"></span>
    </div>
  </div>
  <script src="assets/waifu-tips.js"></script>
  <script src="assets/live2d.js"></script>
  <script type="text/javascript">initModel("assets/")</script>

  <script type="text/javascript">
      (function webpackUniversalModuleDefinition(b, a) { if (typeof exports === "object" && typeof module === "object") { module.exports = a() } else { if (typeof define === "function" && define.amd) { define([], a) } else { if (typeof exports === "object") { exports.POWERMODE = a() } else { b.POWERMODE = a() } } } })(this, function () { return (function (c) { var b = {}; function a(e) { if (b[e]) { return b[e].exports } var d = b[e] = { exports: {}, id: e, loaded: false }; c[e].call(d.exports, d, d.exports, a); d.loaded = true; return d.exports } a.m = c; a.c = b; a.p = ""; return a(0) })([function (j, e, a) { var b = document.createElement("canvas"); b.width = window.innerWidth; b.height = window.innerHeight; b.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999"; window.addEventListener("resize", function () { b.width = window.innerWidth; b.height = window.innerHeight }); document.body.appendChild(b); var c = b.getContext("2d"); var l = []; var k = 0; m.shake = true; function h(o, n) { return Math.random() * (n - o) + o } function g(n) { if (m.colorful) { var o = h(0, 360); return "hsla(" + h(o - 10, o + 10) + ", 100%, " + h(50, 80) + "%, " + 1 + ")" } else { return window.getComputedStyle(n).color } } function f() { var o = document.activeElement; var n; if (o.tagName === "TEXTAREA" || (o.tagName === "INPUT" && o.getAttribute("type") === "text")) { var p = a(1)(o, o.selectionStart); n = o.getBoundingClientRect(); return { x: p.left + n.left, y: p.top + n.top, color: g(o) } } var r = window.getSelection(); if (r.rangeCount) { var q = r.getRangeAt(0); var s = q.startContainer; if (s.nodeType === document.TEXT_NODE) { s = s.parentNode } n = q.getBoundingClientRect(); return { x: n.left, y: n.top, color: g(s) } } return { x: 0, y: 0, color: "transparent" } } function d(o, p, n) { return { x: o, y: p, alpha: 1, color: n, velocity: { x: -1 + Math.random() * 2, y: -3.5 + Math.random() * 2 } } } function m() { var n = f(); var p = 5 + Math.round(Math.random() * 10); while (p--) { l[k] = d(n.x, n.y, n.color); k = (k + 1) % 500 } if (m.shake) { var o = 1 + 2 * Math.random(); var q = o * (Math.random() > 0.5 ? -1 : 1); var r = o * (Math.random() > 0.5 ? -1 : 1); document.body.style.marginLeft = q + "px"; document.body.style.marginTop = r + "px"; setTimeout(function () { document.body.style.marginLeft = ""; document.body.style.marginTop = "" }, 75) } } m.colorful = false; function i() { requestAnimationFrame(i); c.clearRect(0, 0, b.width, b.height); for (var n = 0; n < l.length; ++n) { var o = l[n]; if (o.alpha <= 0.1) { continue } o.velocity.y += 0.075; o.x += o.velocity.x; o.y += o.velocity.y; o.alpha *= 0.96; c.globalAlpha = o.alpha; c.fillStyle = o.color; c.fillRect(Math.round(o.x - 1.5), Math.round(o.y - 1.5), 3, 3) } } requestAnimationFrame(i); j.exports = m }, function (b, a) { (function () { var e = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"]; var d = window.mozInnerScreenX != null; function c(k, m, l) { var h = l && l.debug || false; if (h) { var j = document.querySelector("#input-textarea-caret-position-mirror-div"); if (j) { j.parentNode.removeChild(j) } } var i = document.createElement("div"); i.id = "input-textarea-caret-position-mirror-div"; document.body.appendChild(i); var o = i.style; var f = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle; o.whiteSpace = "pre-wrap"; if (k.nodeName !== "INPUT") { o.wordWrap = "break-word" } o.position = "absolute"; if (!h) { o.visibility = "hidden" } e.forEach(function (p) { o[p] = f[p] }); if (d) { if (k.scrollHeight > parseInt(f.height)) { o.overflowY = "scroll" } } else { o.overflow = "hidden" } i.textContent = k.value.substring(0, m); if (k.nodeName === "INPUT") { i.textContent = i.textContent.replace(/\s/g, "\u00a0") } var n = document.createElement("span"); n.textContent = k.value.substring(m) || "."; i.appendChild(n); var g = { top: n.offsetTop + parseInt(f.borderTopWidth), left: n.offsetLeft + parseInt(f.borderLeftWidth) }; if (h) { n.style.backgroundColor = "#aaa" } else { document.body.removeChild(i) } return g } if (typeof b != "undefined" && typeof b.exports != "undefined") { b.exports = c } else { window.getCaretCoordinates = c } }()) }]) });
  </script>



  <canvas width="914" height="754"
    style="position: fixed; top: 0px; left: 0px; pointer-events: none; z-index: 999999;"></canvas>
  <script>
    POWERMODE.colorful = true; // make power mode colorful
    POWERMODE.shake = false; // turn off shake
    document.body.addEventListener('input', POWERMODE);
  </script>
</body>

</html>